<template>
    <div class='messaging-container'>

        <div class="main" v-if="messagingList.length > 0">
            <div class="left">
                <span class="message-tip">站内消息通知</span>
                <div class="messaging-item" v-for="messaging in messagingList" @click="read(messaging)">

                    <span class="send-message">{{ getContent(messaging.content) }}</span>
                    <span class="send-time">
                        {{ getTime(messaging.createTime) }}
                        <i v-if="messaging.offLine == 0 ? false : true" class="el-icon-star-on"></i>
                        <i @click="deleteMessaging(messaging)" class="el-icon-delete-solid"></i>
                    </span>
                </div>
            </div>
            <div class="right">
                <div class="head">
                    <span>您收到了一份站内信息：</span>
                </div>
                <div v-if="showInfo != null && isInclude(showInfo.content)" :text="showInfo.content">
                    <component :is="dynamicComponent" />
                </div>
                <div v-if="showInfo != null && !isInclude(showInfo.content)" v-html="showInfo.content">
                </div>
            </div>
        </div>

        <div v-if="messagingList.length == 0">
            <el-empty :image-size="400" description="暂无信息哦~"></el-empty>
        </div>
    </div>
</template>
<script>


import Vue from 'vue'

import { timestampToTime } from '../../utils/util';
var webSocket = null;

export default {
    name: 'messaging',
    data() {
        return {
            messagingList: [],   // 未读站内信数据
            showInfo: null,
            url: null,
            memberVo: [],
            sendMsg: {
                from: '',
                to: '',
                text: '',
                messagingId: '',
            },
            refundNote: '',
            dynamicComponent: null,

        };
    },
    components: {
    },
    methods: {


        test(content) {
            return Vue.compile(content)
        },


        isInclude(myStr) {
            return myStr.includes('id="refundOption"')
        },


        /**
         * 去除标签
         * @param {*} content 
         */
        getContent(message) {
            let content = message
            content = content.replaceAll("&nbsp;", "");
            while (true) {
                let indexLeft = content.indexOf("<");
                if (indexLeft == -1) {
                    return content;
                }
                let indexRight = content.indexOf(">");
                let a = content.substring(indexLeft, indexRight + 1)
                content = content.replaceAll(a, "");
            }
            return content
        },



        /**
         * 删除站内信息
         * @param {*} messaging 
         */
        deleteMessaging(messaging) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberexchange/deleteMessaging?memberId=${this.memberVo.id}&messagingId=${messaging.id}`),
                method: 'post',
            }).then(({ data }) => {
                this.getMessaging()
            })
        },


        /**
         * 读取信息
         * @param {*} messaging 
         */
        read(messaging) {
            console.log("读取")
            this.sendMsg.from = messaging.sendMemberId
            this.sendMsg.to = this.memberVo.id
            this.sendMsg.text = messaging.content
            this.sendMsg.messagingId = messaging.id
            let this_ = this
            if ( !messaging.content.includes('id="refundOption"')) {
                webSocket.send(JSON.stringify(this_.sendMsg))
            }
            this.showInfo = messaging

            this.dynamicComponent = Vue.extend({
                template: this_.showInfo.content,
                data() {
                    return {
                        refundNote: '',
                        memberVo: null,
                    };
                },
                methods: {
                    refundOption(orderSn, orderItemId, isRefund) {
                        let refundVo = {
                            memberId: this_.memberVo.id,
                            username: this_.memberVo.nickname,
                            orderSn: orderSn,
                            orderItemId: orderItemId,
                            isRefund: isRefund,
                            note: this.refundNote,
                            messagingId: messaging.id
                        }
                        console.log(refundVo)
                        this.$http({
                            url: this.$http.adornUrl("/shitou-order/shitouorder/order/refundOption"),
                            method: 'post',
                            data: this.$http.adornData(refundVo)
                        }).then(({ data }) => {
                            if (data.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: data.message
                                })
                                this_.getMessaging()
                            }else {
                                this.$message({
                                    type: 'warning',
                                    message: data.message
                                })
                            }
                        })
                    },
                }
            })
        },


        getTime(time) {
            return timestampToTime(time)
        },

        /**
        * 获取未读的站内信
        */
        getMessaging() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberexchange/getMessaging?memberId=${this.memberVo.id}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.messagingList = data.data == null ? [] : data.data
                }
            })
        },

    },
    async created() {
        let member = await this.$memberInfo()
        if (member != null) {
            this.loginValidate = true
            this.memberVo = member;
            this.url = this.url = `ws:${window.SITE_CONFIG.baseUrl.substring(5)}/shitou-member/shitou/messaging/${this.memberVo.id}`
            webSocket = new WebSocket(this.url);
            this.getMessaging()
        }

        webSocket.onmessage = (evt) => {
            this.getMessaging()
        }
    }
}
</script>

<style scoped>
@import url("../../utils/css/messaging.css");
</style>
